<template>
  <div class="user-detail">
    <!-- 用户详情部分 -->
    <el-card class="user-info-card" shadow="hover" :body-style="{ padding: '20px' }">
      <div slot="header" class="clearfix">
        <span class="user-detail-header">用户详情</span>
      </div>
      <div class="user-info">
        <el-row>
          <el-col :span="6" class="user-avatar-col">
            <el-avatar :src="user.head" size="large" class="user-avatar" />
          </el-col>
          <el-col :span="18" class="user-info-col">
            <p><strong>用户名:</strong> {{ user.username }}</p>
            <p><strong>邮箱:</strong> {{ user.email }}</p>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 个人产品列表部分 -->
    <el-card v-if="user.products && user.products.length > 0" class="product-list-card" shadow="hover" :body-style="{ padding: '20px' }">
      <div slot="header" class="clearfix">
        <span class="user-detail-header">个人产品</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8" v-for="(product, index) in user.products" :key="index">
          <el-card class="product-card" shadow="always">
            <img :src="product.image" class="product-image" />
            <div class="product-info">
              <p><strong>产品名称:</strong> {{ product.name }}</p>
              <p><strong>价格:</strong> ¥{{ product.price }}</p>
              <p><strong>类别:</strong> {{ product.category }}</p>
              <p v-if="product.detail"><strong>产品详情:</strong> {{ product.detail }}</p>
              <p v-else>暂无产品详情</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 发布商品按钮 -->
    <div class="action-buttons">
      <el-button @click="goToHome" type="primary" size="large">返回首页</el-button>
      <el-button @click="openProductDialog" type="success" size="large">发布商品</el-button>
      <el-button @click="logout" type="danger" size="large">退出登录</el-button>

    </div>

    <!-- 发布商品的弹窗 -->
    <el-dialog title="发布商品" :visible.sync="dialogVisible" width="50%">
      <el-form :model="newProduct" ref="productForm" label-width="100px">
        <el-form-item label="商品名称" :rules="[ { required: true, message: '请输入商品名称', trigger: 'blur' } ]">
          <el-input v-model="newProduct.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="价格" :rules="[ { required: true, message: '请输入商品价格', trigger: 'blur' } ]">
          <el-input v-model="newProduct.price" type="number" placeholder="请输入商品价格"></el-input>
        </el-form-item>
        <el-form-item label="类别" :rules="[ { required: true, message: '请选择商品类别', trigger: 'blur' } ]">
          <el-select v-model="newProduct.category" placeholder="请选择商品类别">
            <el-option label="食品" value="食品"></el-option>
            <el-option label="生活用品" value="生活用品"></el-option>
            <el-option label="书籍" value="书籍"></el-option>
            <el-option label="电子产品" value="电子产品"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详情">
          <el-input v-model="newProduct.detail" type="textarea" placeholder="请输入商品详情"></el-input>
        </el-form-item>
        <el-form-item label="图片" label-width="100px">
          <el-upload
            action="http://127.0.0.1:8888/upload"
            :show-file-list="false"
            :on-success="uploaded">
            <img v-if="newProduct.image" :src="newProduct.image" alt="" style="height: 100px;aspect-ratio: 4/3">
            <i v-else class="el-icon-plus " style="width: 40px;aspect-ratio: 1/1;border: 1px solid #666;
          display: flex;justify-content: center;align-items: center;" ></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitProduct">发布</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserDetail",
  data() {
    return {
      user: null,
      dialogVisible: false,  // 控制弹窗显示
      newProduct: {  // 新增的商品数据
        name: '',
        price: '',
        category: '',
        detail: '',
        image:''
      },
    };
  },
  created() {
    const user = sessionStorage.getItem("user");
    if (user) {
      this.user = JSON.parse(user);
      this.fetchUserDetails();
    } else {
      this.$router.push("/Login");
    }
  },
  methods: {
    fetchUserDetails() {
      let url = "user/detail";
      this.$http.get(url, { params: { username: this.user.username } })
        .then((res) => {
          if (res.data.code === 1) {
            this.user = res.data.data;
            console.log("用户详情数据: ", res.data);
          } else {
            this.$alert(res.data.msg);
          }
        })
        .catch((err) => {
          console.error("请求失败: ", err);
        });
    },
    goToHome() {
      this.$router.push("/");
    },
    logout() {
      sessionStorage.removeItem("sessionId");
      sessionStorage.removeItem("user");
      this.$router.push("/Login");
    },
    uploaded(response,file,fileList){
      this.newProduct.image=response.data;
    },
    // 打开发布商品的弹窗
    openProductDialog() {
      this.dialogVisible = true;
    },
    // 提交商品
    submitProduct() {
      // 校验表单
      this.$refs.productForm.validate((valid) => {
        if (valid) {
          // 发送保存商品请求
          this.$http.post('product/save', this.newProduct)
            .then((res) => {
              if (res.data.code === 1) {
                this.$message.success("商品发布成功");
                this.dialogVisible = false;
                this.newProduct = {};  // 清空表单数据
                this.fetchUserDetails();  // 刷新产品列表
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              console.error("提交失败: ", err);
            });
        } else {
          this.$message.error("请填写所有必填项");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.user-detail {
  padding: 30px;
  background-color: #f9f9f9;
}

.user-info-card, .product-list-card {
  margin-bottom: 20px;
  border-radius: 12px;
  background-color: #ffffff;
}

.user-detail-header {
  font-size: 18px;
  font-weight: 600;
}

.user-info {
  display: flex;
  align-items: center; /* 确保头像和文本在垂直方向上对齐 */
}

.user-avatar-col {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-avatar {
  width: 60px; /* 设置固定的宽度 */
  height: 60px; /* 设置固定的高度 */
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border: 2px solid #ffffff;
}

.user-info-col p {
  margin: 5px 0;
}

.product-card {
  padding: 15px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
}

.product-info p {
  margin: 8px 0;
  color: #333;
}

.product-info p strong {
  color: #555;
}

.action-buttons {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}

.el-button {
  width: 45%;
  font-size: 16px;
  border-radius: 8px;
}
</style>
